<template>
    <div>
        <div class="container">
            <div class="crumbs">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>
                        <i class="el-icon-lx-cascades"></i> 服务项目分类表格
                    </el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="handle-box">
                <el-input v-model="query.keyword" placeholder="服务项目分类名称 / 查询" class="handle-input mr10" clearable></el-input>
                <el-button type="primary" icon="el-icon-search" @click="func_handleSearch" plain>搜索</el-button>
                <el-button type="danger" icon="el-icon-lx-add" @click="func_handleAdd" plain>添加</el-button>
				<el-button type="info" icon="el-icon-back" @click="func_back" plain>返回列表</el-button>
            </div>
            <el-table :data="projectServiceTableData" border class="table" header-cell-class-name="table-header">
				<el-table-column prop="id" label="ID" width="55" align="center" v-if="false"></el-table-column>
				<el-table-column label="序号" width="55" align="center"><template #default="scope">
						{{scope.$index + 1}}
				</template></el-table-column>
				<el-table-column prop="projectName" label="服务项目名称" ></el-table-column>
				<el-table-column prop="projectTypeName" label="服务项目分类" ></el-table-column>
				<el-table-column prop="projectDecs" label="服务项目描述" ></el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template #default="scope">
                        <el-button type="text" icon="el-icon-edit" @click="func_handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="text" icon="el-icon-delete" class="red" @click="func_handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
                    :page-size="query.pageSize" :total="pageTotal" @current-change="func_handlePageChange"></el-pagination>
            </div>
        </div>
        <!-- ---------------------------------------------------------------------------------------------------------------------- -->
        <!-- 编辑弹出框 -->
        <el-dialog title="服务项目分类编辑" v-model="editDialogVisible" width="55%" :close-on-click-modal="false">
            <el-container>
                <el-main>
                    <el-card style="margin-top:25px">
                        <el-form :label-width="formLabelWidth" :model="projectServiceForm">
                            <el-form-item label="ID" v-if="false">
                                <el-input v-model="projectServiceForm.id" placeholder="ID" clearable size="medium" style="width:350px"/>
                            </el-form-item>
                            <el-form-item label="主分类" prop="parentId">
                                <el-select v-model="projectServiceForm.parentId" placeholder="请选择" style="width:350px">
                                    <el-option label="主分类" value="0"></el-option>
                                    <el-option v-for="(item, index) in parentId_Opts" :key="item.value" :label="item.label" :value="item.value" ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="分类名称">
                                <el-input v-model="projectServiceForm.projectName" placeholder="名称" clearable size="medium" style="width:350px"/>
                            </el-form-item>
                            <el-form-item label="描述">
								<el-input type="textarea" style="width:350px"
								:autosize="{ minRows: 3, maxRows: 5}" v-model="projectServiceForm.projectDecs" placeholder="项目描述">
								</el-input>
                            </el-form-item>
                            <el-form-item label="项目类型">
                                <el-select v-model="projectServiceForm.projectType" placeholder="请选择" style="width:350px">
                                    <el-option label="请选择" value="" />
                                    <el-option v-for="(item,index) in projectType_Opts" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </el-card>
                </el-main>
                <el-footer>
                    <span class="dialog-footer">
                        <el-button @click="editDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="func_saveDialogEdit">确 定</el-button>
                    </span>
                </el-footer>
            </el-container>
        </el-dialog>
    </div>
</template>
<script>
import { ref, reactive, toRefs } from "vue";
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from "element-plus";
import { findServiceProjectListPage, findServiceProjectById, findServiceProjectParentList, saveServiceProject, deleteServiceProjectById } from "../../../api/hairmanager/project";
import { findDictionaryInfoByDicCode } from "../../../api/dict";
export default {
    name: "serviceProjectConfig",
    components: {},
    setup() {
        const router = useRouter();
        const SUCCMESS_ADDDATA_DIALOG_MESSAGE = "添加数据成功";
        const formLabelWidth = ref("170px");
        //主数据条件查询
        const query = reactive({
            keyword: "",
			parentId: "",
            pageIndex: 1,
            pageSize: 10,
        });
        // 主数据总页数
        const pageTotal = ref(0);
        // 主数据表格
        let projectServiceTableData = ref([]);
        let projectServiceForm = reactive({
            id: 0,
            parentId: 0,
            projectName: "",
            projectDecs: "",
            projectType: "",
            needTime: 0,
            disable: 1,
        });
        // 表格编辑时弹窗和保存
        const editDialogVisible = ref(false);
        // 表格详细数据抽拉层
        const drawerViewVisible = ref(false);
        let addFlg = ref(false);
		let projectType_Opts = ref([]);
        let parentId_Opts = ref([]);
// =========================================================================================
        /**
         * @name 获取表格数据
         */
        const func_getData = () => {
			query.parentId = 0;
            findServiceProjectListPage(query).then((res) => {
                projectServiceTableData.value = res.data.list;
                pageTotal.value = res.data.totalPage;
            });
        };
		const func_getOptData = () => {
			let obj = {'dicCode':200};
			findDictionaryInfoByDicCode(obj).then((res) => {
				let vos = res.data.dictionaryVoList;
				vos.forEach(element => {
					projectType_Opts.value.push(
					{
						'label': element['dicName'],
						'value': element['dicCode']
					});
				});
			});
		};
		const func_getParentIDOpt = () => {
			findServiceProjectParentList().then((res) => {
				parentId_Opts.value = res.data;
			});
		}
        func_getData();
        func_getOptData();
		func_getParentIDOpt();
        /**
         * @name 主数据查询操作
         */
        const func_handleSearch = () => {
            query.pageIndex = 1;
            func_getData();
        };
        /**
         * @name 分页导航
         */
        const func_handlePageChange = (val) => {
            query.pageIndex = val;
            func_getData();
        };
        /**
         * @name 主数据编辑对话框操作
         */
        const func_handleAdd = () => {
            Object.keys(projectServiceForm).forEach((item) => {
                projectServiceForm[item] = "";
            });
            addFlg.value = true;
            editDialogVisible.value = true;
        }
        /**
         * @name 读取服务项目详细数据
         */
        let idx = -1;
        const func_handleEdit = (index, row) => {
            idx = index;
            findServiceProjectById(row['id']).then((res)=>{
                if(res.code != 200) {
                    if(res.type == 0) {
                        ElMessage.warning(res.data.msg);
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                } else {
                    Object.keys(res.data).forEach((item) => {
                        projectServiceForm[item] = res.data[item];
                    });
                }
            });
            addFlg.value = false;
            editDialogVisible.value = true;
        };
        /**
         * @name 删除服务项目数据操作
         */
        const func_handleDelete = (index, row) => {
            // 二次确认删除
            ElMessageBox.confirm("选择内容可能包含关联数据，确定要删除吗？", "提示", {
            type: "warning",
            }).then(() => {
                func_delDialogEdit(row['id']);
            }).catch(() => {});
        };

        /**
         * @name 保存服务项目配置
         */
        const func_saveDialogEdit = () => {
            projectServiceForm.needTime = null;
            projectServiceForm.disable = 1;
            saveServiceProject(projectServiceForm).then((res) => {
                if(res.code != 200) {
                    if(res.type == 0) {
                        ElMessage.warning(res.data.msg);
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                } else {
                    if(addFlg.value === true){
                        ElMessage.success(SUCCMESS_ADDDATA_DIALOG_MESSAGE);
                    }else{
                        ElMessage.success(`修改第 ${idx + 1} 行成功`);
                    }
                    editDialogVisible.value = false;
                    func_getData(); // 刷新数据
                }
            });
        };
        /**
         * @name 删除服务项目配置
         */
        const func_delDialogEdit = (id) => {
            deleteServiceProjectById(id).then((res)=>{
                if(res.code != 200) {
                    if(res.type == 0) {
                        ElMessage.warning(res.data.msg);
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                } else {
                    ElMessage.success("删除成功");
                    func_getData(); // 刷新数据
                }
            });
        };
		const func_back = () => {
			router.push('/serviceProject');
		};
        return {
            formLabelWidth, query, pageTotal, func_handleSearch, func_handlePageChange,
            func_getData, func_getOptData, func_getParentIDOpt, projectServiceTableData, func_handleAdd, func_handleEdit, func_handleDelete,
            projectServiceForm, editDialogVisible, addFlg, 
            func_saveDialogEdit, func_delDialogEdit,
            drawerViewVisible,
			projectType_Opts, parentId_Opts,
			func_back,
        };
    },

};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.el-row {
    margin-bottom: 20px;
}
.el-row:last-child {
    margin-bottom: 0;
}
.el-col {
    border-radius: 4px;
}
.grid-label {
    background: #00000;
    min-height: 36px;
    padding-left: 25px;
}
.grid-content {
    background: #00000;
    min-height: 36px;
    padding-left: 6px;
}
.row-bg {
    padding: 0px 0px 0px 0px;
}
.drawer-box-card {
    width:95%;
    margin-left:15px;
    overflow: auto;
}
.drawer-box-tabs {
    width:95%;
    margin-top:10px;
    margin-left:15px;
    overflow: auto;
    height: 900px;
}
</style>